<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tron收银台</title>
    <link rel="stylesheet" href="http://cdn.staticfile.org/layer/3.1.1/theme/default/layer.css?v=3.1.1"
          id="layuicss-layer">
    <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<div class="container">
    <div class="col-xs-12 col-sm-10 col-lg-8 center-block" style="float: none;">
        <div class="page-header">
            <h4>游戏币充值 - 收银台
                <div class="pull-right"><small>联系我们</small></div>
            </h4>
        </div>
        <div class="panel panel-primary">
            <div class="panel-body">

                <form name="alipayment">
                    <input type="hidden" name="csrf_token" value="7a76236ff9b2e827794aea1708f7d19b">

                    <div class="form-group">
                        <div class="order_id">订单号:<span class="order_num"> ----------- </span></div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon"><span></span>收款账户</span>

                            <input class="form-control" id="address" placeholder="转账地址" value="----------"
                                   name="trade_no" type="text" disabled="">
                            <span class="input-group-btn">
                                    <button class="btn btn-default" id="copyButton" type="button">复制</button>
                                  </span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon"><span></span>金额</span>
                            <input class="form-control" id="amount" placeholder="货币类型" value="0" name="name"
                                   type="text"
                                   disabled="">
                            <span class="input-group-addon" id="coinType">?</span>
                        </div>
                    </div>


                    <div class="form-group">
                        <div class="order_id">支付有效期：10分钟</div>
                        <div class="progress" id="schedule-striped-panel">
                            <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45"
                                 id="schedule-striped" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                                <span class="sr-only">45% Complete</span>
                            </div>
                        </div>

                        <div class="progress" id="schedule-success-panel" style="display: none">
                            <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
                                 id="schedule-success" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"
                                 style="width: 40%">
                                <span class="sr-only">40% Complete (success)</span>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="alert alert-info" id="tips-info" role="alert" style="word-break: break-word;">
                            您可以在Tron钱包内进行转账交易(货币类型TRX)
                        </div>
                        <div class="alert alert-danger" id="tips-danger" role="alert"
                             style="word-break: break-word;display: none">当前订单已失效！请重新创建订单支付
                        </div>
                        <div class="alert alert-success" id="tips-success" role="alert"
                             style="word-break: break-word;display: none">当前订单已完成!已将游戏币充值到您的账户,请注意查收
                        </div>
                    </div>

                </form>
            </div>
            <div class="panel-footer text-center">
                Tron-收银台 © 2024 All Rights Reserved.
            </div>
        </div>
    </div>
</div>
</body>
<script>
    window.onload = function () { //方法内容
        function copyToClipboard(text) {
            // 创建一个临时的 textarea 元素
            var tempTextArea = document.createElement("textarea");
            // 将要复制的文本放入 textarea
            tempTextArea.value = text;
            // 将 textarea 隐藏
            tempTextArea.style.position = "fixed";
            tempTextArea.style.top = "-1000px";
            tempTextArea.style.left = "-1000px";
            // 将 textarea 添加到 DOM 中
            document.body.appendChild(tempTextArea);
            // 选中文本
            tempTextArea.select();
            // 尝试复制文本
            var success = document.execCommand("copy");
            // 移除临时 textarea
            document.body.removeChild(tempTextArea);
            // 返回复制操作的结果
            return success;
        }

        //设置复制事件
        document.querySelector("#copyButton").addEventListener("click", () => {
            copyToClipboard(document.querySelector("#address").value);
            alert("你已成功复制转账地址！")
        })


        //获取账户信息
        let localUrl = document.location.pathname.split("/")
        document.querySelector(".order_num").innerText = localUrl[localUrl.length - 1]
        let code = document.querySelector(".order_num").innerText;
        // let h1 = document.querySelector("h1");
        // h1.innerHTML = "收银台 账户:" + orderKey

        //设置点击事件
        let pullRightEle = document.querySelector(".pull-right");
        pullRightEle.addEventListener("click", () => {
            alert("你正在点击联系我们")
        })
        let orderNum = localUrl[localUrl.length - 1]

        $.get("http://127.0.0.1:9021/api/order/query?number=" + orderNum, function (data, status) {
            console.log("订单:", data)
            //console.log(document.querySelector("#address"))
            document.querySelector("#address").value = data.data.address
            document.querySelector("#amount").value = data.data.amount
            if (data.data.coinType === 0) {
                document.querySelector("#coinType").innerHTML = "TRX"
            }
            if (data.data.coinType === 1) {
                document.querySelector("#coinType").innerHTML = "TRC20"
                if (document.querySelector("#tips-info")) {
                    document.querySelector("#tips-info").innerHTML = "您可以在Tron钱包内进行转账交易(货币类型TRC20)"
                }
            }
            let percent = parseInt(data.data.expire) / 6;
            document.querySelector("#schedule-striped").style.width = percent + "%";

            // 这里处理响应数据 如果没有过期时间 说明已过期
            if (!data.data.expire) {
                //支付失败
                document.querySelector("#schedule-striped").style.width = "0%";
                document.querySelector(".panel-primary").style.border = "2px solid rgb(207 61 61)"
                document.querySelector("#tips-info").style.display = "none";
                document.querySelector("#tips-danger").style.display = "block";
            } else {
                outputEveryTenSeconds();
            }
        });

        ///poll/query
        function outputEveryTenSeconds() {
            let totalTime = 11 * 60 * 1000; // 11分钟转换为毫秒
            let interval = 10 * 1000; // 10秒转换为毫秒
            let count = 0;

            let timer = setInterval(function () {
                if (totalTime <= 0) {
                    clearInterval(timer); // 清除定时器 11分钟已经过去了
                } else {
                    let orderId = document.querySelector(".order_num").innerText
                    let address = document.querySelector("#address").value
                    $.get("http://127.0.0.1:9021/api/order/poll/query/?orderId=" + orderId + "&address=" + address, function (data, status) {
                        let expire = parseInt(data.data.expire);
                        if (expire < 0) {
                            //支付失败
                            document.querySelector("#schedule-striped").style.width = "0%";
                            clearInterval(timer); //清除计时器
                            document.querySelector(".panel-primary").style.border = "2px solid rgb(207 61 61)"
                            document.querySelector("#tips-info").style.display = "none";
                            document.querySelector("#tips-danger").style.display = "block";
                        } else {
                            let percent = parseInt(data.data.expire) / 6;
                            document.querySelector("#schedule-striped").style.width = percent + "%";
                            document.querySelector("#schedule-success").style.width = percent + "%";
                            if (data.data.status === 1) {
                                document.querySelector("#schedule-striped-panel").style.display = "none"; //隐藏蓝色进度条
                                document.querySelector("#schedule-success-panel").style.display = "block"; //显示绿色进度条
                                //交易成功
                                clearInterval(timer); //清除计时器
                                document.querySelector(".panel-primary").style.border = "2px solid #3c763d"
                                document.querySelector("#tips-info").style.display = "none";
                                document.querySelector("#tips-success").style.display = "block";

                            }
                        }
                        console.log(data)
                        console.log("Data: " + data + "\nStatus: " + status);
                    });

                    totalTime -= interval;
                }
            }, interval);
        }

        // 调用函数

    }

</script>
</html>